{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="/static/bootstrap/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
  <link href="/static/themes/colors.css" rel="stylesheet" href="style.css">
  <script src="/static/bootstrap/js/bootstrap.min.js" crossorigin="anonymous"></script>
  <script src="/static/vue/vue.min.js" crossorigin="anonymous"></script>
  <script src="/static/jquery/jquery.js" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar bg-main">
    <div class="container-fluid">
      <a class="navbar-brand col-white" href="#">{{system_name}}</a>
    </div>
  </nav>
  <div class="container-fluid" style="margin-top:1.3rem;" id="form_here">
    <div class="alert alert-primary">欢迎使用{{system_name}}</div>
    <table class="table">
      <thead>
        <tr>
          <th class="col-1" scope="col">id</th>
          <th class="col-2" scope="col">game_id</th>
          <th class="col-6" scope="col">credit</th>
          <th class="col-3" scope="col">operate</th>
        </tr>
      </thead>
      <tbody>
        <template v-for="i in ress[0]">
          <tr>
            <th>v{i.id}</th>
            <td>v{i.player_name}</td>
            <td>
              <div class="progress">
                <div class="progress-bar progress-bar-striped" role="progressbar" :style="{ 'width': i.credit + '%' }"
                  aria-valuenow="10" aria-valuemin="0" aria-valuemax="100">v{i.credit}</div>
              </div>
            </td>
            <td>
              <!-- <a href="/credit/123" aria-disabled="true" disabled></a> -->
            </td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</body>
<script>
  const app = Vue.createApp({
    delimiters: ["v{", "}"],
    data() { return { ress: [] } },
    methods: {
      setload(s) {
        this.ress = s
      }

    }
  }).mount('#form_here');
  // app.flush();

  $.ajax({
    type: 'GET',
    url: '/apis/userlist',
    contentType: 'application/json',
    data: {},
    success: function (datars) {
      if (datars['ret'] != 0) {
        alert("请求失败，请尝试刷新页面。")
      }
      else {
        app.setload(datars['data']);
        console.log(datars['data']);
      }
    },
    error: function () { }
  })
</script>

</html>